<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1843591_bmlu6sdeav.css" />
		<link rel="stylesheet" type="text/css" href="new_file.css" />
		<link rel="stylesheet" type="text/css" href="./iconfont.css" />
	</head>
	<body style="margin: 0;padding: 0;">
		<div id="box" style="width: 100%;height: 880px;background-size:cover;background-position: center 0; background-repeat: no-repeat;">
			<div class="box1 qwqw">
				<a href="#" id="toggle"></a>
				<span class="span sspan"></span>
				<span class="span2 sspan"></span>
				<span class="span3 sspan"></span>

				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg">
				<div id="boox">
					<a class="aa" href="#" style="width: 50px;">产品展示
						<p></p>
					</a>
					<a class="aa" href="#" style="width: 60px;margin-left: 20px;">商店定位器
						<p></p>
					</a>
					<a class="aa" href="#" style="width: 30px;margin-left: 20px;">联系
						<p></p>
					</a>
				</div>
			</div>
			<div id="qqqq">
				<p class="a1"></p>
			</div>
			<div id="wwww">
				
					<div id="eeee">
						<div id="rrrr">
							<input class="input1" type="text" name="" id="" value="" placeholder="在这里追踪你的批号..." />
							<i class="iconfont icon-fangdajing"></i>
							<a href="#" style="color: #000000;font-size: 10px;position: relative;top: 720px;left: 330px;">我的批号在哪里？</a>
						</div>
					</div>
				
			</div>
		</div>
		<div class="box2">
			<div class="divs">
				<p class="a2"></p>
				<ul class="dht">
					<li class="lal"></li>
					<li>
							<a href="现场直播.html"><img></a>
							<h3 class="h31"></h3>
							<p class="li_p"></p>
							<span>
							
							</span>
						
					</li>
					<li>
						<a href="根源生活.html"><img></a>
						<h3 class="h32"></h3>
						<p class="li_p"></p>
						<span id="">

						</span>
					</li>
					<li>
						<a href="直播意大利语.html"><img></a>
						<h3 class="h33"></h3>
						<p class="li_p"></p>
						<span id="">

						</span>
					</li>
				</ul>
			</div>
		</div>
		<div id="box2">
			<div id="box22">
				<div id="box222">
					<h4></h4>
					<p></p>
					<div>
						<span></span>
						<a href="阅读我们的故事.html">阅读我们的故事</a>
					</div>
					<img>
				</div>
				<div id="box2222">
					<a href="阅读我们的故事.html"><img></a>
				</div>
			</div>
		</div>
		<div id="box3">
			<div id="box33">
				<a href="集体.html"><img class="box33_img"></a>
				<div id="box333">
					<h4>认识你的种植者</h4>
					<p></p>
					<div>
						<span></span>
						<a href="集体.html">我们的集体</a>
					</div>
					<img>
				</div>
			</div>
		</div>
		<div id="box4">
			<div id="box44">
				<div id="box444">
					<h4></h4>
					<p></p>
					<div>
						<span></span>
						<a href="食谱.html">浏览我们的食谱</a>
					</div>
					<img>
				</div>
				<div id="box4444">
					<a href="食谱.html"><img></a>
				</div>
			</div>
		</div>
		<div id="box5">
			<div id="box55">
				<ul>
					<li>
						<h4>倒入<br>更多<br>贝鲁奇</h4>
					</li>
					<li>
						<a href="银奖.html" ><img src="img/belluccipremium_2020_silver_medal.jpg">
						<p>获奖情况</p>
						<font>奖-LAIEVOOC-银奖-意大利EVOO<br><span></span></font>
						</a>
					</li>
					<li>
						<a href="XINXIANGL.html">
							<img src="./img/Fresh_Bellucci_Olive_Slider.jpg">
							<p>成品</p>
							<font class="font2">新鲜橄榄，在家庭厨房中腌制<br><span></span></font>
						</a>
					</li>
					<li>
						<a href="ganlanchengshou.html">
						<img src="img/The_Ripe_Time_Slider.jpg">
						<p>熟果</p>
						<font class="font3">橄榄和EVOO:时机成熟<br><span></span></font>
						</a>
					</li>
				</ul>
			</div>
			<hr width="1280px" style="margin: 0 auto;">
		</div>
		<div id="box6">
			<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg">
		</div>
		<div id="box7">
			<ul class="box7_ul1">
				<li style="width: 65px;">产品展示
					<p></p>
				</li>
				<li style="width: 113px;">意大利100%EVOO
					<p></p>
				</li>
				<li style="width: 65px;">有机EVOO
					<p></p>
				</li>
				<li style="width: 177px;">SACHET 100％意大利EVOO
					<p></p>
				</li>
				<li style="width: 113px;">SACHET有机EVOO
					<p></p>
				</li>
				<li style="width:153px;">SICILIA PGI有机EVOO
					<p></p>
				</li>
				<li style="width: 146px;">托斯卡纳PGI EVOO
					<p></p>
				</li>
			</ul>
			<ul class="box7_ul2">
				<li style="width: 112px;">意大利是我的家
					<p></p>
				</li>
				<li style="width: 112px;">贝鲁奇应用程序
					<p></p>
				</li>
				<li style="width: 50px;">倒更多
					<p></p>
				</li>
				<li style="width: 80px;">完全可追溯
					<p></p>
				</li>
				<li style="width: 65px;">到达食谱
					<p></p>
				</li>
			</ul>
			<ul class="box7_ul3">
				<li style="width: 32px;">联系<p></p>
				</li>
				<li style="width: 80px;">商店定位器<p></p>
				</li>
				<li style="width: 65px;">获奖情况<p></p>
				</li>
			</ul>
		</div>
		<div id="box10">
			<div id="box10_div1">
				<span class="iconfont icon-chacha" style="font-size: 40px;position:absolute;top: 10px;left: 30px;"></span>
				<img class="tu1" src="https://www.belluccipremium.com/assets/images/logo-bellucci.svg" style="margin-left: 90px;">
			</div>
			<div id="box10_div2">
				<div id="box10_div2_div">
					<ul class="box10_div2_ul1 xz">
						<li style="width: 215px;">意大利是我家<p></p>
						</li>
						<li style="width: 245px;margin-left: 145px;">贝鲁奇应用程序<p></p>
						</li>
						<li style="width: 110px;margin-left: 145px;">苍老师<p></p>
						</li>
					</ul>
					<ul class="box10_div2_ul2 xz">
						<li style="width: 180px;">完全可追溯<p></p>
						</li>
						<li style="width: 145px;margin-left: 166px;">到达食谱<p></p>
						</li>
					</ul>
				</div>
			</div>
			<img src="https://www.belluccipremium.com/uploads/seals/italy-flag.jpg" style="margin: 0 auto;display: block;">
			<ul class="list">
				<li style="width: 60px;margin-left: 535px;"><a href="#">联系</a></li>
				<li style="width: 110px;"><a href="#">商店定位器</a></li>
				<li style="width: 96px;"><a href="#">获奖情况</a></li>
			</ul>
			<div id="box10_div3">
				<img src="img/bellucci-app-logo.png" style="width: 85px;height: 26px;margin-left: 90px;">
				<img src="img/未命名_副本.jpg" style="margin-left: 240px;">
				<ul style="position: relative;left: 640px;top: -97px;">
					<li class="li10">意大利</li>
					<li class="li10">西班牙</li>
					<li class="li10">墨西哥</li>
					<li>美国</li>
				</ul>
			</div>
		</div>
		<div id="box8">
			<p>该网站可能使用一些“ cookies”来改善您的浏览体验。请在继续浏览我们的网站之前，建议您阅读COOKIES政策。</p>
			<div>
				<span></span>
				<a href="#">接受</a>
			</div>
		</div>
		<div class="box9 box1">

		</div>
		
		<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				$.get("new_file.json", function(data) {
					$("#box").css("backgroundImage", "url(" + data[0].image + ")")
					$(".a1").text(data[0].text)
					$(".divs .a2").text(data[1].title)
					var $h3 = $(".dht li h3")
					var $span = $(".dht li span")
					var $box222 = $("#box222")
					var $box5 = $("#box55")
					var $box2222 = $("#box2222")
					var $box444 = $("#box444")
					var $box4444 = $("#box4444")
					$h3.eq(0).text(data[1].text)
					$h3.eq(1).text(data[2].title)
					$h3.eq(2).text(data[3].title)
					$span.eq(0).html(data[1].text2)
					$span.eq(1).text(data[2].text)
					$span.eq(2).text(data[3].text)
					$box222.find("h4").text(data[4].text)
					$box222.find("img").attr("src", data[4].image)
					$box2222.find("img").attr("src", data[4].images)
					$box222.find("p").text(data[4].title)

					var $box3 = $("#box3")
					$box3.find("#box33").find("img").eq(0).attr("src", data[5].image)
					$("#box333").find("p").text(data[5].title)
					$("#box333").find("img").attr("src", data[4].image)

					$box444.find("h4").text(data[6].text)
					$box444.find("img").attr("src", data[4].image)
					$box4444.find("img").attr("src", data[6].image)
					$box444.find("p").text(data[6].title)

				})




				$(".aa").hover(function() {
					$(this).children("p").show()
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": aa
					}, 350)
					console.log($(this).children("p"))
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})






				$("#toggle").hover(function() {
					console.log(1)
					$(this).stop(true).animate({
						opacity: 1
					}, 250)
				}, function() {
					$(this).stop(true).animate({
						opacity: 0
					}, 250)
				})

				$(".sspan").hover(function() {
					$("#toggle").stop(true).animate({
						opacity: 1
					}, 250)
				}, function() {
					$("#toggle").stop(true).animate({
						opacity: 0
					}, 250)
				})

				$.get("new_file.json", function(a) {
					for (var i = 0; i < a.length; i++) {
						var $li = $(".dht li")
						$li.eq(i).find("img").attr("src", a[i].image)
					}
				})

				$("#toggle").click(function() {

					$("#box10").animate({
						"left": 0 + "%"
					}, 500)

				})

				$(".sspan").click(function() {

					$("#box10").animate({
						"left": 0 + "%"
					}, 500)

				})


				$(".iconfont").click(function() {
					$("#box10").animate({
						"left": -100 + "%"
					}, 500)
				})


				$(".xz li").hover(function() {
					
					var aa = $(this).width()
					console.log($(this).children("p"),aa)
					$(this).children("p").stop(true).animate({
						"width": aa
					}, 350)
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})


				$(".dht li").hover(function() {
					console.log(1)
					$(this).children(".li_p").show()
					var aa = $(this).children("h3").width()
					$(this).children(".li_p").stop(true).animate({
						"width": aa
					}, 350)
					// console.log($(this).children("p"))
				}, function() {
					var aa = $(this).children("h3").width()
					$(".dht .li_p").stop(true).animate({
						"width": 0
					}, 350)
				})

				$("#box222 div").hover(function() {
					var $div = $(this).width()
					var i = 0;
					$("#box222 div span").stop(true).animate({
						"width": $div
					}, 250)
				}, function() {
					var $div = $(this).width()
					$("#box222 div span").stop(true).animate({
						"width": 0
					}, 250)
				})


				$("#box333 div").hover(function() {
					var $div = $(this).width()
					var i = 0;
					$("#box333 div span").stop(true).animate({
						"width": $div
					}, 250)
				}, function() {
					var $div = $(this).width()
					$("#box333 div span").stop(true).animate({
						"width": 0
					}, 250)
				})


				$("#box444 div").hover(function() {
					var $div = $(this).width()
					var i = 0;
					$("#box444 div span").stop(true).animate({
						"width": $div
					}, 250)
				}, function() {
					var $div = $(this).width()
					$("#box444 div span").stop(true).animate({
						"width": 0
					}, 250)
				})


				$("#box5 font").hover(function() {
					var aa = $(this).width()
					$(this).children("span").stop(true).animate({
						"width": aa
					}, 350)
				}, function() {
					$(this).children("span").stop(true).animate({
						"width": 0
					}, 350)
				})



				$(".box7_ul1 li").hover(function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": aa
					}, 350)
					console.log($(this).children("p"))
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})

				$(".box7_ul2 li").hover(function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": aa
					}, 350)
					console.log($(this).children("p"))
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})


				$(".box7_ul3 li").hover(function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": aa,
						"height": "2px"
					}, 350)
					console.log($(this).children("p"))
				}, function() {
					var aa = $(this).width()
					$(this).children("p").stop(true).animate({
						"width": 0
					}, 350)
				})





				$("#box8 div").hover(function() {
					var $div = $(this).width()
					var i = 0;
					$("#box8 div span").stop(true).animate({
						"width": $div
					}, 250)
				}, function() {
					var $div = $(this).width()
					$("#box8 div span").stop(true).animate({
						"width": 0
					}, 250)
				})

				var $box9 = $(".box9")
				var $box1 = $(".qwqw").html()
				$(document).ready(function() {
					var p = 0,
						t = 0;

					$(window).scroll(function(e) {
						p = $(this).scrollTop();
						if (t <= p) { //向下滚
							$box9.html($box1)
							$box9.hide()
						} else { //向上滚
							$box9.show()
							
							console.log($(".box9 span"))
							$(".box9 .sspan").hover(function() {
								$(".box9 #toggle").stop(true).animate({
									opacity: 1
								}, 250)
							}, function() {
								$(".box9 #toggle").stop(true).animate({
									opacity: 0
								}, 250)
							})


							$(".box9 #toggle").hover(function() {
								console.log(1)
								$(this).stop(true).animate({
									opacity: 1
								}, 250)
							}, function() {
								$(this).stop(true).animate({
									opacity: 0
								}, 250)
							})

							$(".box9 .aa").hover(function() {
								$(this).children("p").show()
								var aa = $(this).width()
								$(this).children("p").stop(true).animate({
									"width": aa
								}, 350)
								console.log($(this).children("p"))
							}, function() {
								var aa = $(this).width()
								$(this).children("p").stop(true).animate({
									"width": 0
								}, 350)
							})
							
							$(".box9 #toggle").click(function() {
							
								$("#box10").stop(true).animate({
									"left": 0 + "%"
								}, 500)
							
							})
							
							$(".box9 .sspan").click(function() {
							
								$("#box10").stop(true).animate({
									"left": 0 + "%"
								}, 500)
							
							})
							
							$(".iconfont").click(function() {
								$("#box10").stop(true).animate({
									"left": -100 + "%"
								}, 500)
							})
							
						}
						setTimeout(function() {
							t = p;
						}, 0);
						if (p == 0) {
							$box9.css({
								"display": "none"
							})
						}
					});
				});

			$("#box10_div3 ul li:last").mouseover(function(){
				$(this).prevAll("li").css({"opacity":1})
			})
			})
			$("#box10_div3 ul").mouseleave(function(){
				$(this).find(".li10").css({"opacity":0})
			})
		</script>
	</body>
</html>
